<template>
  <div>
    <h1>当前鼠标的位置</h1>
    <div>{{ x }}, {{ y }}</div>
    <div>{{str}}</div>
    <button @click="changeStr">changStr</button>
  </div>
</template>

<script>
import { reactive, onMounted, onUnmounted, toRefs } from 'vue'
function handleMouse () {
  // 准备数据
    const mouse = reactive({
      x: 0,
      y: 0
    })
    // 声明处理函数
    const move = e => {
      mouse.x = e.pageX
      mouse.y = e.pageY
    }
    onMounted(() => {
      document.addEventListener('mousemove', move)
    })
    onUnmounted(() => {
      document.removeEventListener('mousemove', move)
    })
    return mouse
}
function handleStr() {
  const obj = reactive({
      str: '我是vue3'
    })
    // 声明处理函数
    const changeStr = e => {
      obj.str = '我是演示用的,大家别学'
    }
    return {obj,changeStr}
}
export default {
  setup() {
    //--------------------功能A
    const mouse = handleMouse()

    // 功能B
    const {obj, changeStr} = handleStr()

    return {
      ...toRefs(mouse),
      ...toRefs(obj),
      changeStr
    }
  }
}
</script>
